/* 全局样式 */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    color:#000;/* 设置文本颜色为黑色 */
    font-size: 15px;
    line-height: 1.5;
}
a{
    color: #262626; /* 设置链接的颜色为深灰色 */
    text-decoration: none; /* 去除链接的默认下划线 */
}
ul {
    list-style: none; /* 去除列表项前的默认符号 */
  }
.container {
    width: 90%; /* 设置容器的宽度为 90% */
    max-width: 1100px; /* 设置容器的最大宽度为 1100px */
    margin: auto; /* 使容器水平居中 */
}
/* 导航 */
.main-nav{
    display: flex;
    align-items:center;
    justify-content: space-between; /* 在两端对齐内容 */
    height: 60px;
    padding: 20px 0;
    font-size: 14px;
    border-bottom: 2px solid #0067b8;/*边框线*/
}
.main-nav ul {
    display: flex; /* 使用 flexbox 布局排列菜单项 */
  }
.main-nav ul.main-menu {
    flex: 1; /* 使菜单项占据剩余空间 */
    margin-left: 20px; /* 设置左边距 */
}

.main-nav .logo{
    width:200px;
}
.main-nav ul li{
    padding: 0 10px;
}
.main-nav ul li a:hover {
    border-bottom: 2px solid #262626; /* 悬停时更改底部边框颜色 */
  }
  /* 修改右侧菜单，使内容居中对齐 */
.main-nav .right-menu {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}
/* 搜索栏 */
.main-nav  .right-menu .search-input{
    width:180px;
    height: 30px;
    line-height:40px;
    font-size: 15px;
    border: 2px solid #0067b8;
    outline:none;
}

/* 搜索提示框 */
#productAutoComplete{
    background: #fff;
    position: absolute;
    left: 71%;
    width: 180px;
    border-radius: 3px;
    box-shadow: 0 17px 24px 0 rgba(0, 0, 0, .16), 0 7px 8.02px 0 rgba(0, 0, 0, .1);
    display: none;
}
.productAutoItem:hover {
    background-color: #f0f0f0; /* 鼠标悬停时高亮 */
}
#productAutoList {
    margin: 0;
    padding: 0;
    display: flex ;

    flex-direction: column;

}
.productAutoItem {
    list-style: none;
    height: 20px;
    line-height: 20px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.productAutoItem:last-child {
    border-bottom: none; /* 去除最后一个项的底边框 */
}
/* 搜索按钮 */
.search-btn {
    background-color: transparent;  /* 背景透明 */
    border: none;                   /* 去除边框 */
    cursor: pointer;                /* 鼠标悬停时显示为手形光标 */
}

/* 面包屑导航 */
.crumb{
    height: 50px;
    background: #f6f6f6;
    line-height: 50px;
    color:#888;
    font-size:14px;
    border-top: 2px solid #0067b8;/*边框线*/
    margin-bottom: 15px;
    border-radius: 0 0 3px 3px;
}
.crumb .crumb-content .link:hover {
    color: #0067b8;
}
/* 展示区 */
.btn{
    cursor:pointer;
    display: inline-block; /* 设置为内联块级元素 */
    border:0;
    font-weight: bold;
    padding: 10px 20px;
    background: #0067b8;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 按钮悬停样式 */
.btn:hover {
    opacity: 0.9; /* 设置悬停时透明度 */
    text-decoration-color: #fff; /* 悬停时改变下划线颜色 */
}

/* 展示区样式 */
.showcase{
    width: 100%;
    height: 500px; /* 设置高度 */
    background: url("../images/background.jpg")
    no-repeat center center/cover; /* 背景图片 */
    display: flex;
    flex-direction: column;/*纵向排列*/
    align-items: center; /* 水平居中 */
    text-align: center;
    justify-content: flex-end;
    padding-bottom: 50px; /* 底部内边距 */
    margin-bottom: 20px; /* 底部外边距 */
    border-radius: 3px;
}
.showcase h2,
.showcase p {
  margin-bottom: 10px; /* 设置底部外边距 */
  
}
.showcase .btn{
    margin-top:20px;
}


/* footer */
.footer {
    background-color: #f2f2f2; /* 设置背景色 */
    color: #616161; /* 设置文字颜色 */
    font-size: 12px; /* 设置字体大小 */
    padding: 20px 0; /* 设置上下内边距 */

}
.footer-inner {
  max-width: 1100px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中 */
  padding: 0 20px; /* 设置左右内边距 */
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
}
/* 页脚链接列表的样式 */
.footer ul {
    display: flex; /* 使用 flexbox 布局 */
    flex-wrap: wrap; /* 换行显示 */

  }
/* 页脚链接项的样式 */
.footer li {
    margin-right: 20px; /* 设置右边距 */
    margin-bottom: 10px; /* 设置底部外边距 */
  }
  /* 页脚中包含图标的 div 样式 */
.footer div {
    margin-bottom: 10px; /* 设置底部外边距 */
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中 */
  }
  /* 页脚图标样式 */
.footer i {
    margin-right: 10px; /* 设置右边距 */
  }
.links-inner a:hover{
    text-decoration: underline;/*文字底线悬停*/
}
.footer a:hover{
    border-bottom: 2px solid #262626;
}


/*表格美化*/

.Catalog table {
    border-collapse: collapse;      /* 合并边框 */
    border-spacing: 0;               /* 去除单元格之间的空隙 */
    margin-left: auto;               /* 左边距自动 */
    margin-right: auto;              /* 右边距自动 */
    width: 100%;
    margin-bottom: 20px;
    border-radius: 3px;
}
.Catalog .search-input{
    width:180px;
    height: 30px;
    line-height:40px;
    font-size: 15px;
    border: 2px solid #0067b8;
    outline:none;
    border-radius: 3px;
}

.Catalog table td {
    vertical-align: middle;         /* 单元格内容垂直居中 */
    padding: 8px;                   /* 添加内边距，增加单元格内容的间隔 */
    border: 1px solid #ddd;         /* 添加单元格的边框 */
}

.Catalog table td .button {
    margin: 0;                      /* 去除按钮的外边距 */
}

.Catalogtable td input, #Content table td select {
    margin: 0;                      /* 去除表单元素（input/select）的外边距 */
    padding: 5px;                   /* 给表单元素增加内边距 */
    border: 1px solid #ddd;         /* 给表单元素添加边框 */
    border-radius: 4px;             /* 给表单元素加上圆角 */
}
.Catalog table tr:nth-child(odd) {
    background-color: #f2f2f2; /* 灰色 */
}
.Catalog table th {
    background-color: #f4f4f4;      /* 设置表头的背景色 */
    color: #333;                    /* 设置表头文字颜色 */
    padding: 10px;                  /* 表头单元格的内边距 */
    text-align: left;                /* 设置表头文字左对齐 */
    font-weight: bold;               /* 设置表头字体加粗 */
    border: 1px solid #ddd;         /* 给表头添加边框 */
}
/*下划线*/
.Catalog tr td a:hover {
    border-bottom: 2px solid #0067b8; /* 悬停时更改底部边框颜色 */
}

.BackLink a {
    display: inline-block; /* 设置为内联块级元素 */
    padding-top: 10px; /* 设置顶部内边距 */
    color: #0067b8; /* 设置链接颜色 */
    font-weight: 700; /* 设置链接加粗 */
    text-decoration: underline; /* 添加下划线 */
    text-underline-position: under; /* 设置下划线位置 */
    text-decoration-thickness: 2px; /* 设置下划线厚度 */
    text-decoration-color: #fff; /* 设置下划线颜色 */
    transition: text-decoration 0.2s; /* 设置下划线过渡效果 */
}

/* 登录界面样式*/
/*登录 */
.xbox{
    width: 100%;
    height: 350px;
    background: url("../images/playstation.png") no-repeat
    center center/cover;
    border-radius: 3px;
    margin-bottom: 40px; /* 设置底部外边距 */
    margin-top: 20px;
}
.xbox .content{
    width: 40%;
    padding: 30px 0 0 30px;

}
.xbox p{
    margin: 10px 0 10px;
    font-size: 15px;
}
.xbox .table td{
    font-size: 20px ;
    font-weight: bold;  /* 设置字体加粗 */

}
.xbox .table {
    margin-bottom: 20px;  /* 给表格增加底部外边距 */
}
.xbox  a {
    display: inline-block; /* 设置为内联块级元素 */
    padding-top: 10px; /* 设置顶部内边距 */
    color: #0067b8; /* 设置链接颜色 */
    font-weight: 700; /* 设置链接加粗 */
    text-decoration: underline; /* 添加下划线 */
    text-underline-position: under; /* 设置下划线位置 */
    text-decoration-thickness: 2px; /* 设置下划线厚度 */
    text-decoration-color: #0067b8; /* 设置下划线颜色 */
    transition: text-decoration 0.2s; /* 设置下划线过渡效果 */
}
.xbox .search-input{
    width:180px;
    height: 30px;
    line-height:40px;
    font-size: 15px;
    border: 2px solid #0067b8;
    outline:none;
    background-color: transparent;
}

/* 首页卡片的布局 */
.home-cards {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 设置四列布局 */
    gap: 20px; /* 设置网格之间的间隙 */
    margin-bottom: 40px; /* 设置底部外边距 */
}
.home-cards img{
    width: 100%;/*图片满足布局*/
    border-radius: 3px;
}
.home-cards h3
{
    margin-bottom: 5px; /* 设置底部外边距 */

}
.home-cards a {
    display: inline-block; /* 设置为内联块级元素 */
    padding-top: 10px; /* 设置顶部内边距 */
    color: #0067b8; /* 设置链接颜色 */
    font-weight: 700; /* 设置链接加粗 */
    text-decoration: underline; /* 添加下划线 */
    text-underline-position: under; /* 设置下划线位置 */
    text-decoration-thickness: 2px; /* 设置下划线厚度 */
    text-decoration-color: #fff; /* 设置下划线颜色 */
    transition: text-decoration 0.2s; /* 设置下划线过渡效果 */
}

#MainImage {
    margin-top: 15px;
    float: left;
    background: inherit;
    text-align: center;
    width: 100%;

}

#MainImageContent {
    /*border: 1px solid #ccc;*/
    background-color: #fff;
    margin-bottom: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}
#Main {
    display: flex;
    margin: 0;
    width: 100%;
    justify-content: space-between; /* 在两端对齐内容 */
}
#Sidebar {
    float: left;
    width: 100%;
    line-height: 160%;
    margin-top: 50px;
}
#RightSidebar {
    float: right;
    width: 30%;
}
#RightSidebar #MyList {
    width: 96%;
    float: right;
}

/* Carbon */
.carbon {
    height: 350px; /* 设置高度 */
    width: 100%; /* 设置宽度为 100% */
    background: url("../images/petbanner.png") no-repeat center center/cover; /* 背景图片 */
    display: flex; /* 使用 flexbox 布局 */
    justify-content: flex-start; /* 左对齐 */
    align-items: center; /* 垂直居中 */
    border-radius: 3px;
    margin-bottom: 15px;
}
/* .dark 类的文字颜色设置为白色 */
.dark {
    color: #000000; /* 设置文字颜色为白色 */
}
.carbon .content{
    width:45%;
    padding: 50px 0 0 30px;

}
/* .dark 类下的 .btn 按钮样式 */
.dark .btn {
    background-color: #f4f4f4; /* 设置按钮背景色 */
    color: #333; /* 设置按钮文本颜色 */
    text-decoration-color: #f4f4f4; /* 设置按钮文本装饰颜色 */
}

/*悬浮窗口*/
#detail_fish{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productfish{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

#detail_dogs{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productdogs{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem2{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

#detail_reptiles{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productreptiles{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem3{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

#detail_cats{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productcats{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem4{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

#detail_birds{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productbirds{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem5{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

#detail_birds_copy{
    background: #fff;
    position: fixed;
    top: 240px;
    left: 520px;
    width: 180px;
    font-size: 17px;
    /*border: 2px solid #1b1c1a;*/
    line-height: 20px;
    text-align: left;
    color: #171818;
    border-radius: 3px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
}

#productbirds_copy{
    list-style: none;
    margin: 2px;
    padding: 5px;
    /*border: 1px solid #151414;*/
}

#productItem6{
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    text-align: left;
    padding-left: 5px;
    margin-top: 3px;
    /*border-bottom: 1px solid #666;*/
    color: #030303;
    cursor: pointer;
}

/*购物车*/
.MyList{
    width: 30%;
    float: right;
    margin-bottom: 50px;
    margin-top: -30px; /* 向上移动 */
    background-color: #f3f3f3; /* 微软常用的浅灰背景 */
    border-radius: 5px; /* 圆角边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 提升质感的阴影 */
    padding: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 微软风格字体 */
    color: #333; /* 微软常用深灰色字体 */
    text-align: left;
}
.MyList p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #0078d4; /* 微软蓝色 */
}
.MyList ul {
    list-style-type: none; /* 去掉默认的列表标志 */
    margin: 0;
    padding: 0;
}

/* 列表项样式 */
.MyList li {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.MyList li:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 悬停时微小阴影 */

}
.tab-pay{
    background: #ffffff;
    position: fixed;
    top: 370px;
    left: 200px;
    width: 800px;
    height: 250px;
    border-radius: 5px;
    /*font-size: 10px;*/
    /*border: 2px solid #1b1c1a;*/
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);/*阴影*/
    line-height: 20px;
    text-align: center;
    color: #171818;
    display: none;
}

.tab-pay table{
    border-collapse: collapse;      /* 合并边框 */
    border-spacing: 0;               /* 去除单元格之间的空隙 */
    margin-left: auto;               /* 左边距自动 */
    margin-right: auto;              /* 右边距自动 */
    width: 100%;
    margin-bottom: 20px;
    border-radius: 3px;
}
.tab-pay table td {
    vertical-align: middle;         /* 单元格内容垂直居中 */
    padding: 8px;                   /* 添加内边距，增加单元格内容的间隔 */
    border: 1px solid #ddd;         /* 添加单元格的边框 */
}

.tab-pay table td .button {
    margin: 0;                      /* 去除按钮的外边距 */
}

.tab-pay td input, #Content table td select {
    margin: 0;                      /* 去除表单元素（input/select）的外边距 */
    padding: 5px;                   /* 给表单元素增加内边距 */
    border: 1px solid #ddd;         /* 给表单元素添加边框 */
    border-radius: 4px;             /* 给表单元素加上圆角 */
}
.tab-pay table tr:nth-child(odd) {
    background-color: #f2f2f2; /* 灰色 */
}
.tab-pay table th {
    background-color: #f4f4f4;      /* 设置表头的背景色 */
    color: #333;                    /* 设置表头文字颜色 */
    padding: 10px;                  /* 表头单元格的内边距 */
    text-align: left;                /* 设置表头文字左对齐 */
    font-weight: bold;               /* 设置表头字体加粗 */
    border: 1px solid #ddd;         /* 给表头添加边框 */
}
#bye{
    cursor:pointer;
    display: inline-block; /* 设置为内联块级元素 */
    border:0;
    font-weight: bold;
    padding: 10px 20px;
    background: #0067b8;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.orderButton{
    cursor:pointer;
    display: inline-block; /* 设置为内联块级元素 */
    border:0;
    font-weight: bold;
    padding: 10px 20px;
    background: #FA5A57;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.orderButton1{
    cursor:pointer;
    display: inline-block; /* 设置为内联块级元素 */
    border:0;
    font-weight: bold;
    padding: 10px 20px;
    background: #FA5A57;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}